<template>
  <VPage class="app-container">
    <VTable ref="tableRef" v-bind="tableOptins" @checkboxRecords="checkboxRecords">
      <template #form="{ form }">
        <el-input
          v-model.trim="form.country_area_name"
          class="!w-[160px]"
          placeholder="国家区域"
          clearable
        ></el-input>

        <SelectCountry
          v-model="form.country_id"
          placeholder="国家"
          multiple
        ></SelectCountry>
        <el-select v-model="form.status" placeholder="状态" class="!w-[160px]" clearable>
          <el-option
            v-for="item in whetherOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </template>
      <template #toolbar_btns>
        <VButton
          auth="/goods/basics/reference-freight/add"
          type="primary"
          @click="open('add')"
          ><svg-icon icon-class="add_new" />新增</VButton
        >
      </template>
    </VTable>
    <ComModal ref="addref" @query="query"></ComModal>
    <VLog
      ref="logRef"
      class="dialogPublic"
      :api="getBaseHeadFreightLog"
      options="id"
    ></VLog>
  </VPage>
</template>
<script setup lang="jsx" name="BasicsReference-freight">
import ComModal from "./components/ComModal.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { getOption } from "@/api/index.js";
import VLog from "@/components/VLog";
import {
  queryBaseHeadFreightList,
  getBaseHeadFreightLog,
  changeStatusBaseHeadFreight,
} from "./api";
import SelectCountry from "@/components/SelectCountry";
import { whetherOptions } from "./data.js";

const tableRef = ref();
const addref = ref(null);

const records = ref([]);
let options = reactive({});

const loadings = reactive({
  enable: false,
  disable: false,
  del: false,
});

const tableOptins = reactive({
  formConfig: {
    data: {},
  },
  rowConfig: {
    height: 52,
  },
  columns: [
    { field: "id", title: "ID", width: 100 },
    {
      field: "country_area_name",
      title: "国家区域",
      minWidth: 100,
    },
    {
      field: "country_list_text",
      title: "国家",
      width: 160,
      slots: {
        default: ({ row }) => {
          const country_list_text = row.country_list_text?.join("、");
          return (
            <div>
              <VText value={country_list_text}></VText>
            </div>
          );
        },
      },
    },
    {
      field: "air_transport_price",
      title: "空运参考",
      slots: {
        default: ({ row }) => {
          return <div>{row.air_transport_price}</div>;
        },
      },
      width: 95,
    },
    {
      field: "sea_transport_price",
      title: "海运参考",
      slots: {
        default: ({ row }) => {
          return (
            <div>
              <div>货柜体积：{row.sea_transport_bulk} </div>
              <div>价格：{row.sea_transport_price}</div>
            </div>
          );
        },
      },
      width: 150,
    },
    {
      field: "import_duty_radio",
      title: "进口税费比例参考",
      minWidth: 100,
    },
    {
      field: "status",
      title: "状态",
      slots: {
        default: ({ row }) => {
          return (
            <div>
              <el-switch
                v-model={row.status}
                active-value={1}
                inactive-value={0}
                row={row}
                before-change={beforeChange}
                onChange={() => changeStatus(row)}
                disabled={getAuth("/goods/basics/reference-freight/enable-disable")}
              />
            </div>
          );
        },
      },
    },
    { field: "created_user_text", title: "创建人", width: 160 },
    { field: "updated_user_text", title: "最近更新人", width: 160 },
    {
      field: "update_time",
      title: "时间",
      width: 250,
      slots: {
        default: ({ row }) => {
          return (
            <div>
              <div>创建时间：{row.created_at}</div>
              <div>最近更新时间：{row.updated_at}</div>
            </div>
          );
        },
      },
    },
    {
      title: "操作",
      fixed: "right",
      width: 100,
      slots: {
        default: ({ row }) => {
          return (
            <div class="flex justify-start">
              <VButton
                auth="/goods/basics/reference-freight/edit"
                class="mr-4"
                type="primary"
                link
                underline={false}
                onClick={() => open("edit", row.id)}
              >
                编辑
              </VButton>
              <el-link type="primary" underline={false} onClick={() => handleLog(row.id)}>
                日志
              </el-link>
            </div>
          );
        },
      },
    },
  ],
  proxyConfig: {
    props: {
      result: "data",
      total: "total",
    },
    autoLoad: false,
    ajax: {
      query: ({ page, form }) => queryBaseHeadFreightList({ ...form, ...page }),
    },
  },
});

onMounted(() => {
  fetchOption();
});
const query = () => {
  tableRef?.value.query();
};
const fetchOption = () => {
  // option不同接口判断
  getOption("currency").then((res) => {
    options = res.data;
  });
};
// 选中
const checkboxRecords = (arr) => {
  records.value = arr;
};
const logRef = ref();
const handleLog = (id) => {
  logRef.value.open(id);
};

const open = (type, id) => {
  nextTick(() => {
    addref.value.open(type, id);
  });
};
const isHandle = () => {
  const records = getSelectRow();
  return !records.length ? ElMessage.error("请先选择行!") && false : true;
};
//获取已选中的行
const getSelectRow = () => {
  return tableRef?.value.$table.getCheckboxRecords();
};

const beforeChange = (row) => {
  return new Promise((resolve) => {
    ElMessageBox.confirm("是否确认修改当前标签状态?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      return resolve(true);
    });
  });
};

const changeStatus = async (row) => {
  try {
    const res = await changeStatusBaseHeadFreight({
      id: row.id,
      status: row.status,
    });
    ElMessage.success("操作成功");
  } catch (e) {
    throw Error(e);
  }
};
const getAuth = (val) => {
  return !(window.BTN_AUTH || []).includes(val);
};
</script>
